<template>
  <el-cascader
    v-model="value"
    :options="options"
    :props="{
      value: 'label'
    }"
    @change="handleChange"
  />
</template>

<script>
import { regionData } from 'element-china-area-data'

export default {
  name: 'AreaSelect',
  props: {
    area: {
      type: [String, Array],
      default() {
        return []
      }
    }
  },
  data() {
    return {
      options: regionData
    }
  },
  computed: {
    value: {
      get() {
        return this.area
      },
      set(val) {
        this.$emit('update:area', val)
      }
    }
  },
  methods: {
    handleChange(val) {
      console.log(val)
    }
  }
}
</script>

<style scoped>
/*.pagination-container {*/
/*  background: #fff;*/
/*  padding: 32px 16px;*/
/*}*/
/*.pagination-container.hidden {*/
/*  display: none;*/
/*}*/
</style>
